<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>ANI-RSS</title>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
    />
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/element-plus/theme-chalk/dark/css-vars.css"
    />
    <meta name="robots" content="noindex">
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card shadow="never" style="min-width: 480px;">
        <template #header>
            <div class="card-header">
                <span>授权结果</span>
            </div>
        </template>
        <div>
            <div v-if="me">
                <el-descriptions
                        direction="vertical"
                        border
                >
                    <el-descriptions-item
                            :rowspan="2"
                            :width="140"
                            label="头像"
                            align="center"
                    >
                        <el-avatar :src="me['avatar']['large']"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="用户名">
                        <el-text v-if="me['username']">
                            {{ me['username'] }}
                        </el-text>
                        <el-text v-else>
                            {{ me['id'] }}
                        </el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="主页">
                        {{ me['url'] }}
                    </el-descriptions-item>
                    <el-descriptions-item label="邮箱">
                        {{ me['email'] }}
                    </el-descriptions-item>
                    <el-descriptions-item label="注册日期">
                        <el-text>
                            {{ me['reg_time'] }}
                        </el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="授权剩余过期时间">
                        <el-tag type="success" v-if="me['expires_days'] > 3">
                            {{ me['expires_days'] }} 天
                        </el-tag>
                        <el-tag type="danger" v-else>
                            {{ me['expires_days'] }} 天
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="签名">
                        <el-text v-if="me['sign']">
                            {{ me['sign'] }}
                        </el-text>
                        <el-text v-else>
                            无
                        </el-text>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <el-alert
                    style="margin-top: 8px;"
                    :title="text"
                    :type="type"
                    v-loading.fullscreen.lock="loading"
                    :closable="false"/>
        </div>
        <template #footer>
            <div style="display: flex;justify-content: end;">
                <el-button bg text @click="close">关闭</el-button>
            </div>
        </template>
    </el-card>
</div>
</body>
<script>
    let changeToDark = () => {
        document.documentElement.classList.toggle('dark');
    }

    (() => {
        let color = localStorage.getItem('vueuse-color-scheme');
        if (!color) {
            return
        }

        if (color === 'auto') {
            const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (isDarkMode) {
                changeToDark();
            }
            return;
        }

        if (color === 'dark') {
            changeToDark();
        }
    })()

    const App = {
        data() {
            return {
                type: 'success',
                text: '',
                loading: false,
                me: null
            };
        },
        methods: {
            close() {
                window.close()
            },
            load(code, authorization) {
                this.loading = true
                fetch(`api/bgm/oauth/callback?code=${code}&s=${authorization}`)
                    .then(res => res.json())
                    .then(async res => {
                        let {code, message} = res
                        this.type = code === 200 ? 'success' : 'error'
                        this.text = message

                        if (code !== 200) {
                            return
                        }

                        await this.loadMe(authorization)
                    })
                    .finally(() => {
                        this.loading = false
                    })
            },
            loadMe(authorization) {
                return fetch(`/api/bgm?type=me&s=${authorization}`)
                    .then(res => res.json())
                    .then(res => {
                        this.me = res.data
                        const formatter = new Intl.DateTimeFormat('zh-CN', {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit',
                            second: '2-digit',
                            hour12: false
                        })
                        this.me['reg_time'] = formatter.format(new Date(this.me['reg_time']))
                    });
            }
        },
        mounted() {
            let url = new URL(location.href)
            let code = url
                .searchParams.get("code")
            let authorization = localStorage.getItem('authorization')
            if (!authorization) {
                this.type = 'error'
                this.text = 'authorization 为空'
                return
            }
            if (!code) {
                this.type = 'error'
                this.text = 'code 为空'
                return;
            }
            this.load(code, authorization)
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</html>
